<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="fetchData(1)">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
        <!-- 工具条 -->
        <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
    </el-form>

    <el-table
      :data="list"
      v-loading="loading"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" />

        <el-table-column
                        label="序号"
                        width="70"
                        align="center">
            <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>

        <el-table-column prop="hosname" label="医院名称" width="180" />

        <el-table-column prop="hoscode" label="医院编号" width="160" />

        <el-table-column prop="apiUrl" label="地址" width="200"/>

        <el-table-column prop="contactsName" label="联系人"/>

        <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
                {{ scope.row.status==1?'正常':'锁定' }}
            </template>
        </el-table-column>

        <el-table-column label="操作" width="380">
            <template slot-scope="scope">
                <router-link :to="'/yygh/hospset/edit/'+scope.row.id">
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                </router-link>
                <el-button type="danger"  icon="el-icon-delete" @click="removeDataById(scope.row.id)" circle></el-button>
                <!-- 解锁 -->
                <el-button @click="lock(scope.row.id,1)" v-if="scope.row.status==0" type="success" icon="el-icon-unlock" circle></el-button>

                <!-- 锁定 -->
                <el-button @click="lock(scope.row.id,0)" v-if="scope.row.status==1" type="warning" icon="el-icon-lock" circle></el-button>
            </template>
        </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <el-pagination
                  :current-page="page"
                  :page-size="limit"
                  :total="total"
                  style="padding: 30px 0; text-align: center;"
                  layout="total, prev, pager, next, jumper"
                  @current-change="fetchData"
                  />

  </div>
</template>

<script>
import hospset from '@/api/yygh/hospset';
export default{
  data(){//定义数据
    return {
      listLoading:true,//是否显示loading信息
      list:[],//数据列表
      total:0,//总记录数
      page:1,//页码
      limit:3,//每页记录数
      searchObj:{},//查询条件
      multipleSelection: [] // 批量选择中选择的记录列表，注意：不是每行的id
    }
  },

  created(){// Vue实例创建完成，执行created钩子函数
    this.fetchData(1)
  },

  methods:{
    fetchData(page = 1){// 调用api层获取数据库中的数据
      this.page = page;
      this.listLoading = true;

      hospset.getPageList(this.page,this.limit,this.searchObj).then((response) => {
          if(response.success === true){
            this.list = response.data.rows;
            this.total = response.data.total;
          }
          this.listLoading = false;
      });
    },

    resetData() {
    this.searchObj = {}
    this.fetchData()
    },

    removeDataById(id){
        this.$confirm('确定要删除？','提示',{onfirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
        .then(()=>{
          return hospset.removeById(id)
        })
        .then(()=>{
          this.fetchData()
          this.$message({
            type: 'success',
            message:'删除成功!'
          })
        })
    },
    // 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    //批量删除
    removeRows() {
      this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => { //确定执行then方法
          var idList = []
          //遍历数组得到每个id值，设置到idList里面
          for(var i=0;i<this.multipleSelection.length;i++) {
            var obj = this.multipleSelection[i]
            var id = obj.id
            idList.push(id)
          }
          //调用接口
          hospset.removeRows(idList)
            .then(response => {
                //提示
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                //刷新页面
                this.fetchData(1)
            })
      })
    },
    //锁定和取消锁定
    lock(id,status){
      //确认框  是否锁定/解锁
      var msg = status==1?'解锁':'锁定'

      this.$confirm('是否'+msg+'?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          //点击确定后，执行then中的内容
          hospset.lockHospset(id,status).then(resp=>{
            if(resp.code==20000){
              this.$message({
                type: 'success',
                message: msg + '成功!'
              });
              this.fetchData(this.page)//重新加载当前页数据
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    },
  },
}
</script>